<template>
  <div class="banner">
    <Header>
				<div class="title"><span class="title-span">注册</span></div>
				<div class="back" @click="$router.back()"><van-icon name="arrow-left" /></div>
		</Header>
  <!-- </div> -->
  
    <van-form @submit="onSubmit" ref="regForm">
  <van-field
    v-model="username"
    name="username"
    label="用户名"
    placeholder="请输入用户名"
    :rules="
    [{required:true,
    message:'请填写手机号'},
    {
      pattern:/^1[3-9]\d{9}$/,
      message:'手机号格式错误'
    
    }]"
  />
  <van-field
  v-model="vercode"
  name="vercode"
  label="短信验证码"
  placeholder="请输入短信验证码"
  clearable
  :rules="
    [{required:true,
    message:'请填写验证码'},
    {
      pattern:/^\d{6}$/,
      message:'验证码格式错误'
    
    }]"
>
<template #button>
    <van-button 
    size="small" 
    type="primary"
    class="button-text"
    native-type="button" 
    @click="sendSms"
    :disabled="codeBtnDisabled"
  >
  {{code_text}}
  </van-button>
  </template>
</van-field>

  <van-field
    v-model="password"
    type="password"
    name="password"
    label="密码"
    placeholder="密码"
    :rules="
    [{required:true,
    message:'请填写密码'},
    {
      validator:(e)=>/^\w{6,12}$/.test(e),
      message:'密码格式错误'
    
    }]"
  />

  <div>
    <van-button class="footer-text"
    round block type="info" 
    native-type="submit">
    提交
    </van-button>
    
  </div>
</van-form>
  </div>
</template>

<script>
import {NavBar,Form, Field,Icon,Toast } from 'vant';


import {delete_user, reg,sendSms,} from '../api/user';

console.log(NavBar);
console.log(Form);
console.log(Field);
console.log(Icon);
console.log(Toast);
// console.log(reg);
// console.log(sendSms)

export default {
  name:'reg',
    components:{
    [NavBar.name]:NavBar,
    [Form.name]:Form,
    [Field.name]:Field,
    [Icon.name]:Icon,
    [Toast.name]:Toast,


  },
  data(){
    return {
      username:"",
      password:"",
      vercode:"",
 
      codeBtnDisabled:false,
      code_text:"发送验证码"
    }
  },

  // 注销账号
  // mounted() {
  //   delete_user ({
  //     username:"17329269575",
  //     password:"123456",
  //   }).then(res=>{
  //     console.log(res)
  //   })
  // },
  methods:{
    onSubmit(val) {
      console.log('submit', val);
      reg(val).then((res)=>{
        console.log(res)
      });
    },
    async sendSms () {
      try {
        let validate_res = await this.$refs.regForm.validate("username");
        this.codeBtnDisabled = true;
        this.code_text = '发送中...'
        sendSms({
          mobile: this.username,
          type:"register",
        }).then((res)=>{
          console.log(res);
          if(res.code == 0) {
            this.$toast(`短信已经发送到手机号${this.username},请注意查收`);
            let count = 10;
            let timer = setInterval(() => {
              count--;
              this.code_text = `${count}s后再获取`;
              if(count<=0) {
                clearInterval(timer);
                this.code_text = `再次发送`;
                this.codeBtnDisabled = false;

              }
            },1000)
          }
          else {
            this.$toast(res.msg || '发送失败')
            this.codeBtnDisabled = false;
            this.code_text = '再次发送'
          }
      
        }).catch (err=>{
          console.log(err)
          this.$toast(err.msg || '发送失败')
          this.codeBtnDisabled = false;
          this.code_text = '再次发送'
        })
      }catch(e) {

      };
       
    } 

  }
  }

</script>

<style lang="less">
.title {
  text-align: center;
  background-color: green;
  height: 45px;
}
.title-span{
  font-size: 20px;
  top: -25px;
  color: white;
  position: absolute;
  margin-top: 30px;
  right: 170px;
}
.back {
  position: absolute;
  margin-top: -30px;
  left: 10px;
}
.banner-text {
  background-color: green;
}
.button-text {
  background-color: #999;
}
.footer-text {
  background-color: green;
}
</style>